<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <meta charset="utf-8" />
   <script src="js/tools.js"></script>
   <script src="js/ball.js"></script>
   <script type="text/javascript">
        function $$(id) {
             return document.getElementById(id);
        }
        window.onload = function () {
             var cnv = $$("canvas");
             var cxt = cnv.getContext("2d");

             var ball = new Ball(0, cnv.height / 2, 20);
             var mouse = tools.getMouse(cnv);
             //isMouseDown用于标识鼠标是否按下的状态
             var isMouseDown = false;
             var vx = 3;

             cnv.addEventListener("mousedown", function () {
                  //判断鼠标点击坐标是否位于小球上，如果是，则isMouseDown为true
                  if (ball.checkMouse(mouse)) {
                        isMouseDown = true;
                        alert("捕获成功");
                  }
              }, false);

             (function drawFrame() {
                  window.requestAnimationFrame(drawFrame);
                  cxt.clearRect(0, 0, cnv.width, cnv.height);

                  //如果鼠标不是按下状态，则小球继续运动，否则就会停止
                  if (!isMouseDown) {
                        ball.x += vx;
                  }

                 ball.fill(cxt);
             })();
        }
   </script>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>
